<!--
 * 评论
 *
 * @Author: Reisen
 * @Date: 2025-11-26
-->
<template>
    <div>
        <div class="comment">
            <div style="width: 100%; text-align: center">
                <i class="iconfont icon-r-team" style="font-size: 36px"></i>
                <b style="font-size: 24px"> 评论</b>
            </div>
            <div class="comment-msg">
                <div class="comment-img">
                    <img :src="attachImageUrl(avator)" />
                </div>
                <el-input
                    class="comment-input"
                    type="textarea"
                    :rows="2"
                    placeholder="请输入内容"
                    v-model="textarea"
                >
                </el-input>
            </div>
            <el-button type="primary" class="sub-btn" @click="postComment" style="font-size: 20px"
                ><i class="iconfont icon-r-yes" style="font-size: 22px"></i> 评论</el-button
            >
        </div>
        <p>精彩评论：共{{ commentList.length }}条评论</p>
        <ul class="popular" v-for="(item, index) in commentList" :key="index">
            <li>
                <div class="popular-img">
                    <img :src="attachImageUrl(userPic[index])" />
                </div>
                <div class="popular-msg">
                    <ul>
                        <li class="name">{{ userName[index] }}</li>
                        <li class="time">{{ item.createTime }}</li>
                        <li class="content">{{ item.content }}</li>
                    </ul>
                </div>
                <div
                    class="up"
                    ref="up"
                    @click="postUp(item.id, item.up, index)"
                >
                    <svg class="icon">
                        <use xlink:href="#icon-zan"></use>
                    </svg>
                    {{ item.up }}
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
import { mixin } from "../mixins";
import { mapGetters } from "vuex";
import { setComment, setLike, getAllComment, getUserOfId } from "../api/index";

export default {
    name: "comment",
    mixins: [mixin],
    props: [
        "playId", // 歌曲或歌单id
        "type", // 0歌曲、1歌单
    ],
    computed: {
        ...mapGetters([
            "id", // 歌曲或歌单id
            "loginIn", // 用户是否已登录
            "userId", // 当前登录用户id
            "avator", // 当前登录用户头像
        ]),
    },
    data() {
        return {
            textarea: "", // 存放输入的评论内容
            commentList: [], // 存放评论列表
            userPic: [], // 用户的头像
            userName: [], // 用户的昵称
        };
    },
    mounted() {
        this.getComment();
    },
    methods: {
        // 提交评论
        postComment() {
            if (this.loginIn) {
                let params = new URLSearchParams();
                // eslint-disable-next-line eqeqeq
                if (this.type == 0) {
                    params.append("songId", this.playId);
                } else {
                    params.append("songListId", this.playId);
                }
                params.append("userId", this.userId);
                params.append("type", this.type);
                params.append("content", this.textarea);
                setComment(params)
                    .then((res) => {
                        // eslint-disable-next-line eqeqeq
                        if (res.code == 1) {
                            this.notify("评论成功", "success");
                            this.textarea = "";
                            this.getComment();
                        } else {
                            this.notify("评论失败", "error");
                        }
                    })
                    .catch((_err) => {
                        this.notify("评论失败", "error");
                    });
            } else {
                this.rank = null;
                this.notify("请先登录", "warning");
            }
        },
        // 评论列表
        getComment() {
            getAllComment(this.type, this.playId)
                .then((res) => {
                    this.commentList = res;
                    for (let item of res) {
                        this.getUsers(item.userId);
                    }
                })
                .catch((_err) => {
                    this.notify("评论加载失败", "error");
                });
        },
        // 获取用户的头像和昵称
        getUsers(id) {
            getUserOfId(id)
                .then((res) => {
                    this.userPic.push(res.avator);
                    this.userName.push(res.username);
                })
                .catch((_err) => {
                    this.notify("出错了", "error");
                });
        },
        // 给某一个评论点赞
        postUp(id, up, index) {
            if (this.loginIn) {
                let params = new URLSearchParams();

                params.append("id", id);
                params.append("up", up + 1);
                setLike(params)
                    .then((res) => {
                        // eslint-disable-next-line eqeqeq
                        if (res.code == 1) {
                            this.$refs.up[index].children[0].style.color =
                                "#2796cd";
                            this.getComment();
                        } else {
                            this.notify("点赞失败", "error");
                        }
                    })
                    .catch((_err) => {
                        this.notify("点赞失败", "error");
                    });
            } else {
                this.rank = null;
                this.notify("请先登录", "warning");
            }
        },
    },
};
</script>
<style lang="scss" scoped>
@import "../assets/css/comment.scss";
</style>
